<template>
	<view style="min-height: 100vh;">
		<u-navbar :title="assignTaskTitle" :autoBack="true" leftIconColor="#1E272E" bgColor="transparent"
			:titleStyle="{fontWeight:700,fontSize:'32rpx',color:'#1E272E'}"></u-navbar>
		<image src="https://renovationcdn.jiachuangnet.com/details1/bg.png" class='bg'
			style="height: 476rpx;width: 100%;"></image>
		<view class="container" v-if="info">
			<view class="container_box" style="margin-bottom: 100rpx;">
				<view class="flex alignItem bewteen">
					<view class="label" style="width:200rpx">订单名称</view>
					<view class="val" v-if="info.assignName">
						{{info.assignName}}
					</view>
				</view>
				<view class="flex alignItem bewteen">
					<view class="label" style="width:200rpx">店铺名称</view>
					<view class="val" v-if="info.storeName">
						{{info.storeName}}
					</view>
				</view>
				<view class="flex alignItem bewteen" v-if="info.brandPartyId==1">
					<view class="label" style="width:160rpx">店铺类型</view>
					<view class="val">
						{{info.storeType==1?'普通店':'旗舰店'}}
					</view>
				</view>
				<view class="flex alignItem bewteen" v-if="info.brandPartyId==2">
					<view class="label" style="width:160rpx">店铺类型</view>
					<view class="val">
						{{info.storeType==1?'加盟店':'旗舰店'}}
					</view>
				</view>
				<view class="flex alignItem bewteen" @click='map'>
					<view class="label" style="width:200rpx">详细地址</view>
					<view class="val" style="display:flex;align-items:center;justify-content: flex-end;" v-if="info.address">
						<text>{{info.address}}</text>
					</view>
				</view>
				<view class="flex alignItem bewteen">
					<view class="label" style="width:250rpx">工期（天）
					</view>
					<view class="val" v-if="info.templateName">
						{{info.templateName}}
					</view>
				</view>
				<view class="flex alignItem bewteen">
					<view class="label" style="width:300rpx">计划完工时间
					</view>
					<view class="val" style="text-align: right;font-size: 28rpx;" >
						{{info.planEndTime?info.planEndTime.split(' ')[0]:''}}
					</view>
				</view>
				<view class="flex alignItem bewteen">
					<view class="label" style="width:250rpx">施工负责人
					</view>
					<view class="val" v-if="info.projectUserName">
						{{info.projectUserName}}
					</view>
				</view>
				<view class="flex alignItem bewteen">
					<view class="label" style="width:160rpx">监理人员
					</view>
					<view class="val" v-if="info.chargeUserName">
						{{info.chargeUserName}}
					</view>
				</view>
				<view class="flex alignItem bewteen">
					<view class="label" style="width:160rpx">发货仓库</view>
					<view class="val" v-if="info.areaName">
						{{info.areaName}}
					</view>
				</view>
				<view class="flex alignItem bewteen">
					<view class="label" style="width:160rpx">货架公司</view>
					<view class="val" v-if="info.afterName">
						{{info.afterName}}
					</view>
				</view>
				<view class="flex alignItem1 bewteen">
					<view class="label" style="width:160rpx">备注</view>
					<view class="val" v-if="info.remark">
						<u--textarea v-model="info.remark" count :disabled="true"></u--textarea>
					</view>
				</view>
				<view class="flex alignItem bewteen">
					<view class="label" style="width:300rpx">订单创建日期
					</view>
					<view class="val" style="text-align: right;font-size: 28rpx;" >
						{{info.createTime?info.createTime.split(' ')[0]:''}}
					</view>
				</view>
				<view class="flex alignItem bewteen">
					<view class="label" style="width:300rpx">订单创建人
					</view>
					<view class="val" style="text-align: right;font-size: 28rpx;" v-if="info.userName">
						{{info.userName}}
					</view>
				</view>
				<view class="flex alignItem bewteen">
					<view class="label" style="width:300rpx">订单确认日期
					</view>
					<view class="val" style="text-align: right;font-size: 28rpx;" >
						{{info.confirmOrderTime?info.confirmOrderTime.split(' ')[0]:''}}
					</view>
				</view>
				<view class="flex alignItem bewteen">
					<view class="label" style="width:300rpx">测量日期
					</view>
					<view class="val" style="text-align: right;font-size: 28rpx;" >
						{{info.measureTime?info.measureTime.split(' ')[0]:''}}
					</view>
				</view>
				<view class="flex alignItem bewteen">
					<view class="label" style="width:300rpx">合同签订日期
					</view>
					<view class="val" style="text-align: right;font-size: 28rpx;" >
						{{info.signTime?info.signTime.split(' ')[0]:''}}
					</view>
				</view>
				<view class="flex alignItem bewteen">
					<view class="label" style="width:300rpx">合同总价
					</view>
					<view class="val" style="text-align: right;font-size: 28rpx;" >
						{{info.contractMoney}}
					</view>
				</view>
				<view class="flex alignItem bewteen">
					<view class="label" style="width:300rpx">实际完成时间
					</view>
					<view class="val" style="text-align: right;font-size: 28rpx;" >
						{{info.confirmTime?info.confirmTime.split(' ')[0]:''}}
					</view>
				</view>
				<!-- <view class="flex alignItem bewteen">
					<view class="label" style="width:300rpx">付款方式
					</view>
					<view class="val" style="text-align: right;font-size: 28rpx;" v-if="info.contractPayStatus">
						{{info.contractPayStatus==3?'线下支付':'线上支付'}}
					</view>
				</view> -->
				<view class="flex alignItem bewteen" v-if="info.contractPayStatus==3" style="height: auto;">
					<view class="label" style="width:300rpx;height: auto;">付款凭证
					</view>
					<view class="imgWrapper flex" style="flex-wrap: wrap;justify-content: flex-start;">
						<image v-for="(url,index) in info.payCertificate" @click="viewImgChoose(i,index)" :src="'https://'+url" mode="" style="width: 203rpx;height: 166rpx;margin: 10rpx;"></image>
					</view>
				</view>
				<view class="flex alignItem bewteen" v-else>
					<view class="label" style="width:300rpx">实际付款
					</view>
					<view class="val" style="text-align: right;font-size: 28rpx;" >
						<view  style="color:#13989a ;text-decoration: underline;" @click="checkPayList">
							付款记录
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>
<script>
	import Decimal from 'decimal.js'
	import upload from '@/components/upload/upload.vue'
	let app = getApp();
	export default {
		data() {
			return {
				assignTaskId: 0,
				bottom: app.globalData.safeBottom,
				color: app.globalData.defaultColor,
				templateId: '',
				info: null,
				assignTaskTitle: '查看订单',
			}
		},

		onShow() {
			this.payCertificate=['']
		},
		onLoad(query) {
			if (query.assignTaskId) {
				this.assignTaskId = query.assignTaskId
				// 查看或编辑
				this.getBrandTaskDetailById()
			}
		},
	
		methods: {
			viewImgChoose(i,index){
				uni.previewImage({
					current:index,
					urls:this.info.payCertificate.map(url=>'http://'+url),
					longPressActions: {
						itemList: ['保存图片'],
						success: data=> {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							uni.closePreviewImage()
							/* 保存图片到系统相册 */
							if(data.tapIndex==0){
								uni.getImageInfo({
											src:this.info.payCertificate.map(url=>'http://'+url)[data.index],
											success: function(res) {
												console.log(res)
												uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
													filePath:res.path, //图片文件路径
													success: function() {
														uni.showToast({
															title: '图片保存成功',
															icon: 'none',
														});
													},
													fail: function(e) {
														console.log(e);
														uni.showToast({
															title: '图片保存失败',
															icon: 'none',
														});
													},
												});
											},
											fail: function(e) {
												console.log(e);
												uni.closePreviewImage()
												uni.showToast({
													title: '图片保存失败',
													icon: 'none',
												});
											},
										})
							}
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			checkPayList() {
				uni.navigateTo({
					url: `/pages/comfirmPay/payList?contractId=${this.info.contractsId}`
				})
			},
			getBrandTaskDetailById() {
				uni.$u.http.get('/assign/getTaskDetailById', {
					params: {
						assignTaskId: this.assignTaskId
					}
				}).then(res => {
					if (res) {
						this.info = res
					}
				})
			},
		}

	}
</script>
<style>
	page {
		background: #fff !important;
		height: 100vh;
		position: relative;
	}
</style>
<style lang="scss" scoped>
	.val_selet {
		overflow: unset !important;
	}

	.alignItem {
		height: 88rpx;
		box-sizing: border-box;
		font-weight: 500;
		font-size: 28rpx;
		color: #868686;

		.val {
			text-align: end;
		}

		.label {
			font-weight: 500;
			font-size: 28rpx;
			color: #1E272E;
		}
	}

	::v-deep.container {
		.uni-select--disabled {
			background-color: unset;
		}
	}

	::v-deep.alignItem1 {
		flex-direction: column;
		font-weight: 500;
		font-size: 28rpx;
		color: #868686;

		.u-textarea {
			margin-top: 21rpx;
			background-color: #f5f5f5;

			.u-textarea__count {
				background-color: unset !important;
			}
		}

		.val {
			width: auto;
			text-align:end !important;
		}

		.label {
			font-weight: 500;
			font-size: 28rpx;
			color: #1E272E;
		}
	}

	.bg {
		width: 750rpx;
		height: 430rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.container {
		width: 700rpx;
		position: absolute;
		top: 200rpx;
		left: 25rpx;
		z-index: 2;
		// min-height: 100vh;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 0 22rpx;
		border-radius: 20rpx;
	}

	.item {
		height: 294rpx;
		width: 700rpx;
		margin-bottom: 20rpx;
		// background-size: 100% 100%;
		// background: url('http://skv5jh74d.hn-bkt.clouddn.com/addMaterial/itemBg.png?e=1728810230&token=Uw65xcftwz9gmAL88CkCQDOLnHuqiD5jAvGQ7msg:wczllfps1gJQtgAUO0-qNJnVuYU=');
	}

	.bottom {
		text-align: center;
		margin-top: 30rpx;
	}

	.container /deep/ .uni-select {
		border: none !important;
	}

	.container /deep/ .u-input {
		background-color: unset !important;
	}

	.container /deep/ .uni-select__input-placeholder {
		font-size: 28rpx !important;
		color: #c7ccd3;
		text-align: right;
	}

	.container /deep/ .uni-icons {
		font-size: 32rpx;
		margin-left: 10rpx;
	}

	.container /deep/ .uni-select__selector-item {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 可选，当内容超出一行时，用省略号表示 */
	}


	.container /deep/ .u-upload__wrap {
		justify-content: flex-end;
	}

	.container /deep/ .uni-select__input-text {
		text-align: right;
	}
</style>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>